<template>
    <div class="container-fluid">
        <div class="content">
            <div class="left">
                <img :src="leftImg" alt="" />
            </div>
            <div class="right">
                <div class="form">
                    <div class="title">泥页岩岩相识别管理系统</div>
                    <div class="subTitle">欢迎使用</div>
                    <el-form label-position="top" style="margin:20px 0 0 20px;" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                        <el-form-item label="用户名" prop="username">
                            <el-input prefix-icon="el-icon-user" style="width:350px" v-model="ruleForm.username" placeholder="请输入用户名"></el-input>
                        </el-form-item>
                        <el-form-item label="密码" prop="password">
                            <el-input prefix-icon="el-icon-lock" type="password" style="width:350px" v-model="ruleForm.password" placeholder="请输入密码"></el-input>
                        </el-form-item>
                    </el-form>
                    <el-button style="width:100%;margin-top:30px;" type="primary" @click="submit">提交</el-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import qs from 'qs'
    // import('@/assets/img/bootstrap.min.css')
    // import('@/assets/img/dmaku.css')
    // import('@/assets/img/perfect-scrollbar.min.css')
    export default {
        data() {
            return {
                ruleForm: {
                    username: '',
                    password: '',
                },
                rules: {
                    username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
                    password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
                },
                leftImg: require('@/assets/img/leftBg2x.png'),
                autoLogin: false,
                errorTip: '',
                usernameError: false,
                passwordError: false
            }
        },
        methods: {
            //表单提交登录
            submit() {
                this.$refs['ruleForm'].validate((value) => {
                    if (value) {
                        this.$router.push('/main')
                    }
                })
            },
        },
        watch: {
        }
    }
</script>

<style>
    .container-fluid {
        /* background-color: #2d3a4b; */
        background: url('../assets/img/kezhiLoginBg.png');
        background-size: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100vw;
        height: 100vh;
        overflow: auto;
        background-size: cover;
        background-attachment: fixed;
    }

    .content {
        display: flex;
        justify-content: space-between;
        width: 1200px;
        height: 500px;
        padding: 0;
    }

    .left {
        width: 645px;
    }

    .logo {
        width: 180px;
        height: 45px;
        margin-bottom: 28px;
        margin-left: 60px;
    }

    .logo img {
        width: 100%;
        height: 100%;
    }

    .logoTitle {
        margin-bottom: 33px;
        color: #606468;
        font-weight: 600;
        font-size: 26px;
        font-family: PingFangSC-Semibold, PingFang SC;
        text-align: center;
    }

    .right {
        width: 460px;
        background-color: #ffffff;
        background-size: 100%;
        border-radius: 6px;
        /* padding: 20px; */

    }

    .right .title {
        font-size: 30px;
        font-weight: 600;
        text-align: center;
        font-family: PingFangSC-Semibold, PingFang SC;
        margin-top: 50px;
        color: #606468;
    }

    .right .subTitle {
        font-size: 25px;
        color: #606468;
        text-align: center;
        font-family: PingFangSC-Semibold, PingFang SC;
        margin-top: 10px;
    }

    .form {
        width: 90%;
        margin: 0 auto;
    }

    .right_title {
        color: #ffffff;
        font-weight: 600;
        font-size: 30px;
        font-family: PingFangSC-Semibold, PingFang SC;
        text-align: center;
    }

    .right img {
        width: 100%;
        height: 465px;
        margin-top: 50px;
    }

    .h5 {
        color: white;
        font-weight: 400;
        letter-spacing: 10px;
        margin-top: 150px;
        margin-bottom: 30px;
        font-size: 40px;
    }

    .form-control {
        width: 450px;
        height: 45px;
        border-radius: 5px;
        border: 1px solid rgba(255, 255, 255, 0.1);
    }

    .input-group-prepend {
        margin-top: 20px;
    }

    .denglu {
        margin-top: 20px;
    }

    .btn {
        width: 460px;
        height: 40px;
        border-radius: 5px;
        margin-left: 36px;
        background-color: #1890FF;
        color: white;
    }
</style>